<template>
  <div class="device-profile">
    <el-card shadow="hover">
      <div class="header">
        <span class="title">{{ device?.name || '设备档案' }}</span>
        <div class="actions">
          <el-button type="primary" @click="dialogVisible = true" style="margin-right: 16px;">编辑</el-button>
          <el-button @click="goBack" plain>返回</el-button>
        </div>
      </div>
      <el-row>
        <el-col :span="24">
          <el-descriptions title="基本信息" :column="1" border>
            <el-descriptions-item label="设备编号">{{ device?.id }}</el-descriptions-item>
            <el-descriptions-item label="设备名称">{{ device?.name }}</el-descriptions-item>
            <el-descriptions-item label="设备类型">{{ device?.type }}</el-descriptions-item>
            <el-descriptions-item label="设备品牌">{{ device?.brand }}</el-descriptions-item>
            <el-descriptions-item label="规格型号">{{ device?.model }}</el-descriptions-item>
            <el-descriptions-item label="归属部门">{{ device?.department }}</el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="statusTagType(device?.status)">
                {{ device?.status }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="购置日期">{{ device?.buyDate }}</el-descriptions-item>
            <el-descriptions-item label="安装位置">{{ device?.location }}</el-descriptions-item>
            <el-descriptions-item label="负责人">{{ device?.manager }}</el-descriptions-item>
            <el-descriptions-item label="联系方式">{{ device?.phone }}</el-descriptions-item>
            <el-descriptions-item label="备注" :span="3">{{ device?.remark }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-card>

    <!-- 编辑弹窗 -->
    <el-dialog v-model="dialogVisible" title="编辑设备" width="500px" destroy-on-close>
      <el-form :model="editRow" :rules="formRules" ref="formRef" label-width="90px">
        <el-form-item label="设备名称" prop="name">
          <el-input v-model="editRow.name" />
        </el-form-item>
        <el-form-item label="设备类型" prop="type">
          <el-select v-model="editRow.type" placeholder="请选择">
            <el-option v-for="item in typeOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="设备品牌" prop="brand">
          <el-input v-model="editRow.brand" />
        </el-form-item>
        <el-form-item label="规格型号" prop="model">
          <el-input v-model="editRow.model" />
        </el-form-item>
        <el-form-item label="归属部门" prop="department">
          <el-input v-model="editRow.department" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="editRow.status" placeholder="请选择">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="购置日期" prop="buyDate">
          <el-date-picker v-model="editRow.buyDate" type="date" value-format="YYYY-MM-DD" style="width:100%;" />
        </el-form-item>
        <el-form-item label="安装位置" prop="location">
          <el-input v-model="editRow.location" />
        </el-form-item>
        <el-form-item label="负责人" prop="manager">
          <el-input v-model="editRow.manager" />
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="editRow.phone" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="editRow.remark" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

// 类型扩展
interface Asset {
  id: number
  name: string
  type: string
  brand: string
  model: string
  department: string
  status: string
  buyDate: string
  location: string
  manager: string
  phone: string
  remark?: string
}

const typeOptions: string[] = ['空调主机', '空气净化器', '电梯', '照明系统', '水泵', '配电柜']
const statusOptions = [
  { label: '正常', value: '正常' },
  { label: '维护', value: '维护' },
  { label: '故障', value: '故障' },
  { label: '报废', value: '报废' }
]

const assetList: Asset[] = Array.from({ length: 15 }, (_, i) => ({
  id: 1001 + i,
  name: ['中央空调', '新风主机', '电梯', '消防泵', '净水设备'][i % 5] + (i + 1),
  type: typeOptions[i % typeOptions.length],
  brand: ['格力', '美的', '西门子', '松下', '施耐德'][i % 5],
  model: `X-${i + 1}00`,
  department: ['工程部', '后勤部', '物业部'][i % 3],
  status: statusOptions[i % statusOptions.length].value,
  buyDate: `2021-0${(i % 9) + 1}-${(10 + i) % 28 + 1}`.replace(/-(\d)\b/g, '-0$1'),
  location: ['一楼机房', '二楼设备间', 'A座楼顶'][i % 3],
  manager: ['张三', '李四', '王五'][i % 3],
  phone: ['13312345601', '13987654321', '13888888888'][i % 3],
  remark: '设备运行良好'
}))

const route = useRoute()
const router = useRouter()
const device = ref<Asset | null>(null)
const dialogVisible = ref(false)
const editRow = reactive<Asset>({
  id: 0, name: '', type: '', brand: '', model: '', department: '', status: '', buyDate: '', location: '', manager: '', phone: '', remark: ''
})
const formRef = ref()
const formRules = {
  name: [{ required: true, message: '必填', trigger: 'blur' }],
  type: [{ required: true, message: '必选', trigger: 'change' }],
  brand: [{ required: true, message: '必填', trigger: 'blur' }],
  model: [{ required: true, message: '必填', trigger: 'blur' }],
  department: [{ required: true, message: '必填', trigger: 'blur' }],
  status: [{ required: true, message: '必选', trigger: 'change' }],
  buyDate: [{ required: true, message: '必选', trigger: 'change' }],
  location: [{ required: true, message: '必填', trigger: 'blur' }],
  manager: [{ required: true, message: '必填', trigger: 'blur' }],
  phone: [{ required: true, message: '必填', trigger: 'blur' }]
}

function fetchDevice() {
  const id = Number(route.params.id)
  device.value = assetList.find(item => Number(item.id) === id) || null
  if (device.value) Object.assign(editRow, device.value)
}
fetchDevice()

function statusTagType(status: string | undefined): 'success' | 'warning' | 'danger' | 'info' | 'primary' | undefined {
  switch (status) {
    case '正常': return 'success'
    case '维护': return 'warning'
    case '故障': return 'danger'
    case '报废': return 'info'
    default: return undefined
  }
}

function submitEdit() {
  formRef.value?.validate((valid: boolean) => {
    if (!valid) return
    if (device.value) {
      Object.assign(device.value, editRow)
      ElMessage.success('保存成功')
    }
    dialogVisible.value = false
  })
}

function goBack() {
  router.back()
}
</script>

<style scoped>
.device-profile {
  width: 100%;
  margin: 0 auto;
  padding: 32px 24px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.title {
  font-size: 26px;
  font-weight: bold;
  color: #333;
}
.actions {
  display: flex;
  gap: 10px;
}
</style>
